<template>
    <el-table :data="orignTableData" style="width: 100%" class="layers-table">
        <el-table-column type="selection" width="55" />
        <el-table-column label="名称" width="auto" fixed="left">
            <template #default="scope">
                <el-popover effect="light" trigger="hover" placement="top" width="auto">
                    <template #default>
                        <div>名称: {{ scope.row.name }}</div>
                    </template>
                    <template #reference>
                        <el-text
                            tag="ins"
                            style="
                                font-size: 12px;
                                font-style: normal;
                                font-weight: 400;
                                line-height: 12px;
                                color: #2a78ff;
                                text-align: left;
                                text-decoration-line: underline;
                                text-transform: none;
                                text-wrap: nowrap;
                            "
                            >{{
                                scope.row.name.includes(':')
                                    ? scope.row.name.substring(scope.row.name.indexOf(':') + 1)
                                    : scope.row.name
                            }}</el-text
                        >
                    </template>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column label="类型" width="100" fixed="left">
            <template #default="scope">
                <div
                    style="
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 50px;
                        height: 18px;
                        background: #ffffff;
                        border: 1px solid;
                        border-radius: 2px;
                    "
                    :style="{
                        color: scope.row.type == 'coverage' ? '#00C93C' : '#2A78FF',
                        borderColor: scope.row.type == 'coverage' ? '#00C93C' : '#2A78FF',
                    }"
                >
                    <img v-if="scope.row.type == 'coverage'" :src="rasterImage" />

                    <img v-else-if="geometryTypeDic.point.includes(scope.row.type)" :src="vectorPointImage" />
                    <img v-else-if="geometryTypeDic.line.includes(scope.row.type)" :src="vectorLineImage" />
                    <img
                        v-else-if="geometryTypeDic.polygon.includes(scope.row.type) || true"
                        :src="vectorPolygonImage"
                    />
                    <span style="margin-left: 5px; font-size: 12px">{{
                        scope.row.type == 'coverage' ? '栅格' : '矢量'
                    }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="工作空间" prop="workspace"> </el-table-column>
        <el-table-column label="数据名称" prop="dataName"></el-table-column>
        <el-table-column label="数据分类">
            <template #default="scope">
                <span>{{ dataCatalog(scope.row) }}</span>
            </template>
        </el-table-column>
        <el-table-column label="数据时间" prop="dataDate"></el-table-column>
        <el-table-column label="数据来源" prop="dataClassify"></el-table-column>
        <el-table-column label="导入时间" width="180">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon><Timer /></el-icon>
                    <span style="margin-left: 10px">{{
                        scope.row.dateCreated ? dateFormat(scope.row.dateCreated, 'YYYY-MM-DD') : ''
                    }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
            <template #default>
                <el-button
                    type="success"
                    :icon="Select"
                    circle
                    style="width: 16px; height: 16px; font-size: 12px; line-height: 16px"
                />
                <span style="margin-left: 4px; color: #00c93c">发布成功</span>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
        v-if="totalOrignTableData > 10"
        v-model:current-page="layersQueryFormData.pageNum"
        v-model:page-size="layersQueryFormData.pageSize"
        class="layers-pagination"
        :page-sizes="[10, 20, 50, 100]"
        :background="true"
        layout="total, sizes, prev, pager, next"
        :total="totalOrignTableData"
    />
</template>
<script setup lang="ts">
import { Select, CloseBold } from '@element-plus/icons-vue'
import { dateFormat } from '@/utils/util'
import vectorPointImage from '@/assets/images/layers/vector-point.png'
import vectorPolygonImage from '@/assets/images/layers/vector-polygon.png'
import vectorLineImage from '@/assets/images/layers/vector-line.png'
import rasterImage from '@/assets/images/layers/raster.png'
import { DICTIONARY } from '@/config/dictionary'
import useLayersFilterModal from '../../hooks'

//几何类型字典
const geometryTypeDic = DICTIONARY.geometryType

const layersFilterModal = useLayersFilterModal()
const { totalOrignTableData, orignTableData } = layersFilterModal
// 图层查询表单
const layersQueryFormData = layersFilterModal.layersQueryFormData
// const layerPreview = (row: Layers.LayerInfoShow) => {
//     const url = router.resolve({
//         path: '/layerPreview',
//         query: { showType: row.showType, layers: row.name },
//     }).href
//     window.open(url, '_blank')
// }
// 数据分类
const dataCatalog = (rowData: any) => {
    // const catalogTypeDictionary: Record<string, string> = {
    //     Satellite: '卫星影像',
    //     Ortho: '正射产品',
    //     Feature: '专题数据',
    // }
    // return `${catalogTypeDictionary[rowData.catalogType]} - ${rowData.catalogName}`
    const catalogTypeDictionary: Record<string, string> = DICTIONARY.logicalDirectoryType
    const catalogType = catalogTypeDictionary[rowData.catalogType] || rowData.catalogType
    return rowData.catalogName ? `${catalogType} - ${rowData.catalogName}` : `${catalogType}`
}
</script>
<style scoped lang="scss">
@import './publishedOverView';
</style>
